<div style="float:left;">
<form id="addAttachmentsForm" method="post" action="<?=$this->baseUrl?>/attachments.raw/process-add-attachments" enctype="multipart/form-data">
	<div style="margin-left:10px;width:350px;">
	<div style="width:325px;margin-left:auto;margin-right:auto;">
	<strong><?=__("Add Attachments")?>:</strong>
	<input type="hidden" name="attachmentReferenceId" value="<?=$this->attachmentReferenceId?>">
	<input type="hidden" name="MAX_FILE_SIZE" value="10485760">
	<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progressKey" value="<?=uniqid('');?>"/>
	<input type="file" name="uploadFile"/>
	</div>
	<div style="width:325px;margin-left:auto;margin-right:auto;display:none;" id="fileUploadProgressId">
	<strong><?=__("Progress")?>:</strong>
	<div style="width:320px;margin-left:auto;margin-right:auto;border:thin solid black;height:20px;"><div id="uploadProgressBarId" style="background-color:blue; width:0px;height:100%;"></div></div>
	</div>
<br />
<div>
</div>
<script>
dojo.require("dojo.io.iframe");
function ajaxUploadFile() {
	dojo.io.iframe.send({
		url: '<?=$this->baseUrl?>/attachments.raw/process-add-attachments',
		method: "post",
		handleAs: "json",
		method: 'post',
		form: 'addAttachmentsForm',
		load: function(data){ dojo.byId('uploadProgressBarId').style.width = '100%';},
		error: function (er) {alert('err: ' + er)}	
		});
		initProgressBar();
}
</script>
<br style="clear:left"/>
<div style="text-align:right;margin-top:10px;">
	<input type="button" value="<?=__("Cancel")?>"/>
	<input type="button" value="<?=__("Upload")?>" onClick="ajaxUploadFile();" />
	<!--<input type="submit" />-->
<script>
function addedNewAttachments() {

}
function initProgressBar(progressKey) {
	dojo.byId('fileUploadProgressId').style.display = "block";
	if (progressKey == undefined) {
		progressKey = dojo.byId('progressKey').value;
	}
	dojo.xhrGet ({
		url: '<?=$this->baseUrl?>/attachments.raw/view-upload-progress?uploadKey=' + progressKey,
		handleAs: 'json', 
		load: function (data) {
			//alert('progressKey: ' + progressKey + ' :: '  + data);
			dojo.byId('uploadProgressBarId').style.width = data + '%';
			setTimeout("initProgressBar(progressKey)", 1000);
		}, 
		error: function (er) {alert('err: ' + er)}}
	);
}
</script>
</div>
</form>
</div>
